<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/photoswipe.css"/>
    <title>建议反馈</title>
</head>
<body>
	<div id="feedback">
		<div class="feedTitle">反馈问题的类型</div>
		<div class="feedTips">
			<span>服务态度</span>
			<span>菜品质量</span>
			<span class="on">店内卫生</span>
			<span>其他因素</span>
		</div>
		<form id="upPic" enctype="multipart/form-data">
			<textarea name="content" class="content"></textarea>
			<div id="photo">
				<!--    照片添加    -->
		        <div class="z_photo">
		            <div class="z_file">
		                <input type="file" name="file[]" id="file" value="" accept="image/*" multiple
		                       onchange="imgChange('z_photo','z_file');"/>
		            </div>
					<div class="quanbox" >最多可上传三张图片</div>
		        </div>
		        <!--遮罩层-->
		        <div class="z_mask">
		            <!--弹出框-->
		            <div class="z_alert">
		                <p>确定要删除这张图片吗？</p>
		                <p>
		                    <span class="z_cancel">取消</span>
		                    <span class="z_sure">确定</span>
		                </p>
		            </div>
		        </div>
			</div>
			 <div class="m_button_row" style="bottom: 0;">
	            <button type="button" class="zc_btn" value="提交"
	                    onclick="submitPic()">提交
	            </button>
	        </div>
	    </form>
	</div>
<script type="text/javascript">
	function imgChange(obj1, obj2) {
		$('.quanbox').hide(100)
        //获取点击的文本框50
        var file = document.getElementById("file");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        
		
		var tolength=$('.z_photo .z_addImg').length;
    	if (tolength <= 2) {
    		console.log(111)
    		for (var i = 0; i < fileList.length; i++) {
	            var imgUrl = window.URL.createObjectURL(file.files[i]);
	            imgArr.push(imgUrl);
	            var img = document.createElement("img");
	            img.setAttribute("src", imgArr[i]);
	            var imgAdd = document.createElement("div");
	            imgAdd.setAttribute("class", "z_addImg");
	            imgAdd.appendChild(img);
	            imgContainer.appendChild(imgAdd);
	        }
    	} else{
    		console.log('超出3张')
    		alert('最多只能上传3张')
    		i=2;
       	}
        ;
        imgRemove();
    };

    function imgRemove() {
        var imgList = document.getElementsByClassName("z_addImg");
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function () {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function () {
                    mask.style.display = "none";
                };
                sure.onclick = function () {
                    mask.style.display = "none";
                    t.style.display = "none";
                };

            }
        }
        ;
    };
</script>
</body>
</html>
